<template>
  <div class="recharge">
    <!-- header -->
    <van-nav-bar
      title="充值"
      left-text="返回"
      right-text="记录"
      class="recharge-nav"
      ref="header"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- content -->
    <van-cell-group class="recharge-main">
      <van-cell title="购买会员" is-link :value="value" @click="show = !show" />
      <van-cell title="付款方式" value="支付宝" />
      <van-cell title="实付金额" :value="'¥' + money" />
      <van-button type="danger" block>立即支付</van-button>
    </van-cell-group>

    <!-- 购买会员 -->
    <van-popup v-model="show" position="bottom">
      <van-picker
        show-toolbar
        title="购买会员"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "Recharge",
  data() {
    return {
      type: "1",
      payType: "1",
      money: "25",
      show: false,
      value: "一月会员",
      columns: ["一月会员", "一周会员", "三月会员", "六月会员", "年度会员"]
    };
  },
    mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require('statusBar');
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret){
        _this.$refs.header.$el.style.height = (ret.statusHeight + 44) + 'px';
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + 'px';
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__left"
        )[0].style.top = ret.statusHeight + "px";
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__right"
        )[0].style.top = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 返回
    onClickLeft() {
      window.api.closeWin();
    },
    // 确认
    onConfirm(value, index) {
      this.type = index + 1;
      this.value = value;
      this.money =
        index === 0
          ? "25"
          : index === 1
          ? "6"
          : index === 2
          ? "60"
          : index === 3
          ? "120"
          : "200";
      this.show = false;
    },
    // 取消
    onCancel() {
      this.show = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.recharge {
  width: 100%;
  @include flex(
    $direction: column,
    $justifyContent: flex-start,
    $flexWrap: nowrap
  );
  .recharge-main {
    width: 100%;
    .van-button {
      width: 343px;
      margin-left: 16px;
      margin-top: 30px;
      padding: 0 15px;
    }
  }
}
</style>
